<template>
  <p>{{msg2}}</p>
  <p>{{counter}}</p>
  <p>{{doubkeCounter}}</p>
  <p ref="desc"></p>
</template>

<script>
import { reactive, computed, onMounted, onUnmounted, ref, toRefs, watch } from 'vue'
export default {
  setup () {
    //counter相关
    //使用toRefs后就可以解构出动态变化的值
    const { counter, doubkeCounter } = useCounter()

    //其他数据，单值响应式
    const msg2 = ref('some message')

    //使用元素引用
    const desc = ref(null)

    //侦听器
    watch(counter, (val, oldval) => {
      const p = desc.value
      p.textContent = `counter change from ${oldval} to ${val}`
    })

    return { counter, doubkeCounter, msg2, desc }
  }

}
function useCounter () {
  const data = reactive({
    counter: 1,
    doubkeCounter: computed(() => data.counter * 2)
  })
  let timer
  onMounted(() => {
    timer = setInterval(() => {
      data.counter++
    }, 1000)
  })

  onUnmounted(() => {
    clearInterval(timer)
  })
  return toRefs(data)
}
</script>
